<template>
    <n-space vertical size="large" style="border: solid 1px #0f3a60;">
      <n-layout>
        <n-layout has-sider>
          <n-layout-sider content-style="padding: 24px;">
           <!-- <component :is="QForm"></component> -->
          <QForm :def-username="`黄老师`" @on-add="OnAdd"></QForm>
          </n-layout-sider>
          <n-layout-content content-style="padding: 24px; min-width:500px; background-color:#eeeeee;">
            <QList :data="data">
              <template v-slot:header>
                <div style="color:black">人员兴趣爱好采集表</div>
              </template>
              <template v-slot:pitem="scope">
                <div style="background-color: white;color:#0f3a60;">
                  {{ scope.data.username }} - {{scope.data.gender  }}  {{scope.data.hobby  }}  
                </div>
              </template> 
            </QList>
          </n-layout-content>
        </n-layout>
      </n-layout>
    </n-space>
  </template>
  
  <script setup lang="ts" name="Questionnaire"> 

  // @on-add="OnAdd"

//局部
import QForm from './QForm.vue'
import QList from './QList.vue'

import { ref } from 'vue'

const data = ref([])

function OnAdd(ctx){
console.log("from sub component ",ctx )
data.value.push(ctx)
} 

  
</script>